<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<link rel="stylesheet" href="../css/app.css"/>
		<style>
			.mui-content .mui-table-view-cell .iconfont{
				font-size: 20px;
				padding-right:20px;
			}
			.mui-table-view-cell:after{
				/*left:0px;*/
			}
			.mui-content .icon-shezhi{
				color:#999;
			}
			.mui-content .icon-shoucang{
				color:#fea93d;
			}
			.mui-content .icon-2{
				color:#FF0000;
			}
			.mui-content .icon-pinglun{
				color:#8A6DE9;
			}
			.am-header .mui-header-img img{
				width:80px;
				height:80px;
				border-radius: 40px;
			}
			.am-header{
				text-align: center;
				padding:40px 30px;
				background:#fff;
			}
			.mui-header-img,.mui-header-name{
				display: inline-block;
			}
			.mui-table-view{
				background: none;
				margin-top:5px!important;
			}
			.mui-table-view:before,.mui-table-view:after,.mui-table-dingdan:after{
				content:none;
			}
			.mui-table-view-cell{
				background: #fff;
			}
			.mui-table-view-shezhi,.mui-table-view-version{
				margin-top:5px;
			}
			.mui-icon{
				font-size:14px;
				color: #ACACB4;
			}
			.mui-header-name{
				margin-top:10px;
			}
			.mui-head-top{
				display: inline-block;
			}
			.mui-navigate-face{
				margin:0!important;
				padding:0 0 0 15px!important;
				line-height:60px;
			}
			.mui-navigate-face img{
				width:40px;
				height:40px;
				border-radius: 20px;
			}
			.mui-navigate-face span{
				float: right;
				position:relative;
				right:40px;
				top:10px;
				height:40px;
			}
			.mui-table-face{
				padding:0px!important;
			}
			.mui-navigate-right1 span{
				float: right;
				margin-right:20px;
			}
			.mui-bar-nav~.mui-content{
				padding:0;
				margin-top:44px;
			}
		</style>
	</head>

	<body>
		<div class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">修改信息</h1>
		</div>
		<div class="mui-content">
			<ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-table-face">
		            <a class="mui-navigate-right mui-navigate-face">
						头像<span><img src="../images/banner01.jpg" id="mui-face-pic" /></span>
		            </a>
		        <!--</li>
				 <li class="mui-table-view-cell mui-table-mobile">
		            <a class="mui-navigate-right mui-navigate-right1 mui-navigate-mobile">
						账号<span id="mui-navigate-mobile">13333333333</span>
		            </a>
		        </li>-->
		        <li class="mui-table-view-cell" id="mui-table-nickname">
		            <a class="mui-navigate-right mui-navigate-right1">
						昵称<span id="mui-navigate-nickname">我的橄榄app</span>
		            </a>
		        </li>
		        <li class="mui-table-view-cell" id="mui-table-xingbie">
		            <a class="mui-navigate-right mui-navigate-right1">
						性别<span id="mui-navigate-xingbie">男</span>
		            </a>
		        </li>
		    </ul>
		</div>

	</body>

	<script src="../js/mui.min.js"></script>
	<script src="../js/castapp.js"></script>
	<script src="../js/myapp.js"></script>
	<script>
		ca.init();
		get_info();
		//头像上传
		ca.className('mui-table-face')[0].addEventListener('tap',function(){
			//var access_token = localStorage.getItem('access_token');
			//var url = request_url+'/api/oauth/upload_avatar?access_token='+access_token + '&user_access_token='+get_user_access_token();
			var arr = ['照相机','相册'];
			ca.upload_avatar(arr,{
				succFn:function(data){
					//data为文件路径
					//console.log(data);
	        		localStorage.setItem('cropper_path', data);
	        		ca.newInterface({url:'crop.html',id:"crop"});
				},
				errFn:function(data){
					ca.prompt(data);
				},
				//是否开启上传
				isUpload:true,
				//上传地址
				//http://peipao.dongyixueyuan.com/upload_file.php  
				uploadUrl:'',
				
			})
		});
		//修改昵称 
		ca.id('mui-table-nickname').addEventListener('tap',function(){
			var user_nicename = localStorage.getItem('user_nicename');
			ca.inputPrompt({
				title:'提示',
				content:'请输入昵称',
				default:user_nicename,
				callback:function(data){
					if(data){
						var json_data = {user_access_token:get_user_access_token(),user_nicename:data};
						update_user_info(json_data,function(res){
							ca.id('mui-navigate-nickname').innerText = data;
							ca.prompt(res.msg);
							localStorage.setItem('user_nicename', data);
							ca.sendNotice('pages/home.html','userInfo',{});
						});
					}
				}
			});
		});
		//性别修改
		ca.id('mui-table-xingbie').addEventListener('tap',function(){
			var user_sex = localStorage.getItem('user_sex');
			var arr = ['男','女'];
			ca.actionSheet(arr,{
				succFn:function(data){
					if(user_sex != data+1){
						//console.log(user_sex +'--'+data);
						var json_data = {user_access_token:get_user_access_token(),sex:data+1};
						update_user_info(json_data,function(res){
							ca.id('mui-navigate-xingbie').innerText = arr[data];
							localStorage.setItem('user_sex', data+1);
							ca.sendNotice('pages/home.html','userInfo',{});
						}); 
					}
					ca.prompt('修改成功 ');
				}
				
			})
		});
		//接收通知消息
		ca.receiveNotice("userInfo",function(event){
			var json = event.detail.json;
			setTimeout(function(){
				ca.closeWaiting();
				ca.prompt(json.msg);
				if(json.status == 1){
					get_info();
				}
			},1500);
		});
		//接收通知消息
//		ca.receiveNotice('myinfo',function(event){
//			console.log(43213123);
//			get_info(); 
//		    setTimeout(function(){
//				ca.closeWaiting();
//				ca.prompt(json.msg);
//			},1000);
//		});
	</script>
</html>